<template>
  <div>
    <h3>柱状图和饼图2</h3>
    <div class="box" ref="box"></div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: {},
      num: 1,
      chartsDataList: [],
      timer: null,
      index: 0,
    };
  },
  mounted() {
    let me = this;
    setTimeout(() => {
      me.init();
      this.$bus.on("resize", (val) => {
        this.myChart.resize();
      });
    }, 120);
  },
  methods: {
    init() {
      let box = this.$refs.box;
      let myChart = this.$echarts.init(box);
      var scale = 1;
      var rich = {
        yellow: {
          color: "#ffc72b",
          fontSize: 30 * scale,
          padding: [5, 4],
          align: "center",
        },
        red: {
          color: "red",
          fontSize: 38 * scale,
          padding: [5, 4],
          align: "center",
        },
        total: {
          color: "#ffc72b",
          fontSize: 40 * scale,
          align: "center",
        },
        title: {
          color: "#333",
          align: "center",
          fontSize: 16 * scale,
          padding: [0, 0, 14, 0],
        },
        blue: {
          color: "#49dff0",
          fontSize: 16 * scale,
          align: "center",
        },
        hr: {
          borderColor: "#0b5263",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      let option = {
        color: ["#2D79E9", "#797B7F", "#67C23A", "#7FAE90"],
        tooltip: [
          {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
        ],

        legend: {
          show: false,
        },
        title: {
          text: "任务名称XXXX",
          textStyle: { fontSize: 22 },
          subtext: "总耗时：XX分XX秒XXX毫秒",
          subtextStyle: { fontSize: 16, color: "#999999" },
          x: "center",
        },
        grid: [
          {
            top: 50,
            width: "50%",
            bottom: "25%",
            left: 10,
            containLabel: true,
          },
          {
            top: "55%",
            width: "50%",
            bottom: 0,
            left: 10,
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            boundaryGap: [0, 0.01],
            name: "单位：毫秒",
          },
        ],
        yAxis: [
          {
            type: "category",
            data: [
              "任务启动时间",
              "步骤等待时间",
              "步骤运行时间",
              "任务结束时间",
            ],
          },
        ],
        selectedMode: "single",
        series: [
          {
            type: "bar",
            label: {
              formatter: function (params, ticket, callback) {
                let value = params.value;
                return value + "毫秒";
              },
              position: "right",
              show: true,
            },
            data: [
              100,
              {
                value: 23489,
                itemStyle: {
                  color: "#797B7F",
                },
              },
              {
                value: 29034,
                itemStyle: {
                  color: "#67C23A",
                },
              }, //

              {
                value: 4970,
                itemStyle: {
                  color: "#7FAE90",
                },
              },
            ],
          },
          {
            type: "pie",
            radius: [0, "60%"],
            center: ["75%", "40%"],
            data: [
              { value: 100, name: "任务启动时间" },
              { value: 23489, name: "步骤等待时间" },
              { value: 29034, name: "步骤运行时间", selected: true },
              { value: 4970, name: "任务结束时间" },
            ],
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
                  let value = params.value;
                  let valStr = "yellow";
                  if (value >= 29034) {
                    valStr = "red";
                  }
                  let str =
                    "{title|" +
                    params.name +
                    "} \n {" +
                    valStr +
                    "|" +
                    params.value +
                    "} 毫秒  \n {blue|" +
                    params.percent +
                    "%}";
                  return str;
                },
                rich: rich,
              },

              color: "#333",
            },
          },
        ],
      };
      myChart.setOption(option, true);
      this.myChart = myChart;
      this.myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 2,
        dataIndex: 1,
      });
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 500px;
}
.topBtn {
  display: flex;
  justify-content: center;
}
</style>
